<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>

<body>
    <script>
        //创建场景
        var scene = new THREE.Scene();
        //设置相机（视野，显示口的宽高比，近裁剪面 ，远裁剪面）
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        //渲染器
        var renderer = new THREE.WebGLRenderer({ antialias: true })
        //设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放
        renderer.setSize(window.innerWidth, window.innerHeight, false)
        //将渲染器添加到html当中
        document.body.appendChild(renderer.domElement);

        //盒子模型BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        //使用网孔基础材料（MeshBasicMaterial）进行着色器，这里只绘制了一个绿色
        var material = new THREE.MeshBasicMaterial({ color: 0x00ffff })
        //使用网孔(Mesh)来承载几何模型
        var cube = new THREE.Mesh(geometry, material);
        //将模型添加到场景当中
        scene.add(cube);
        //将相机沿z轴偏移5
        camera.position.z = 5;
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);
        //设置一个动画函数
        var animate = function () {
            //一秒钟调用60次，也就是以每秒60帧的频率来绘制场景。
            requestAnimationFrame(animate);

            //console.log(cube.rotation);
            //每次调用模型的沿xy轴旋转0.01
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            //使用渲染器把场景和相机都渲染出来
            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>